<!DOCTYPE html>
<html>
<head>
    <title>我的修仙游戏</title>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .main{
            display: none;
        }
    </style>
    <script>
        // Existing code to parse query parameters...
        // 获取完整URL
        var url = window.location.href;
        
        // 获取URL的查询参数部分（包括?）
        var queryString = window.location.search;
        console.log("查询参数部分：", queryString);
        
        // 将查询参数转换为对象形式
        function getQueryObject(query) {
            var obj = {};
            if (query && typeof query === 'string') {
                // 去除开头的 ?
                query = query.substring(1);
                
                // 按 & 进行切割并遍历每个参数
                var paramsArr = query.split('&');
                for (var i = 0; i < paramsArr.length; i++) {
                    var param = paramsArr[i].split('=');
                    
                    // 设置参数名称和值到obj对象上
                    var key = decodeURIComponent(param[0]);
                    var value = decodeURIComponent(param[1] || "");
                    obj[key] = value;
                }
            }
            
            return obj;
        }
        
        // 调用getQueryObject()函数获取查询参数对象
        var queryObj = getQueryObject(window.location.search);
    </script>
    <script>
        $(document).ready(function() {
        // Check if the user parameter is present and not empty
        if (queryObj.user && queryObj.user.trim() !== '') {
            
            var socket = new WebSocket("wss://ws.arkcms.cn/ws?user=" + encodeURIComponent(queryObj.user));
            
            socket.onmessage = function(event) {
                // Parse the incoming user data
                var userData = JSON.parse(event.data);
                console.log(userData)
                
                // Update the user's display with the new data
                document.getElementById("level").innerText = userData.Level;
                document.getElementById("experience").innerText = userData.Experience;
                document.getElementById("healthPoints").innerText = userData.HealthPoints;
                document.getElementById("manaPoints").innerText = userData.ManaPoints;
                document.getElementById("attack").innerText = userData.Attack;
                document.getElementById("defense").innerText = userData.Defense;
                document.getElementById("speed").innerText = userData.Speed;
                document.getElementById("spirit").innerText = userData.Spirit;
                document.getElementById("comprehension").innerText = userData.Comprehension;
                document.getElementById("cultivationTechnique").innerText = userData.CultivationTechnique;
                document.getElementById("levelname").innerText = userData.LevelName;
                document.getElementById("name").innerText = queryObj.user;
                $('.main').css('display','block'); 
            };
            
            socket.onopen = function(event) {
                console.log("WebSocket 已连接。");
            };
            
            socket.onclose = function(event) {
                console.log("WebSocket 已断开。");
            };
            
            socket.onerror = function(event) {
                console.error("WebSocket 发生错误：", event);
            };
        } else {
            console.error("用户参数缺失或为空。");
            alert("用户参数缺失或为空。")
        }
    });
    </script>
</head>
<body>
    <div class="main">
        <h1>欢迎，修仙者【<span id="name"></span>】！</h1>
        <p>等级: <span id="level">1</span>【<span id="levelname">练气期</span>】</p>
        <p>经验: <span id="experience">0</span></p>
        <p>生命值: <span id="healthPoints">50</span></p>
        <p>法力值: <span id="manaPoints">30</span></p>
        <p>攻击力: <span id="attack">5</span></p>
        <p>防御力: <span id="defense">5</span></p>
        <p>速度: <span id="speed">5</span></p>
        <p>灵力: <span id="spirit">5</span></p>
        <p>悟性: <span id="comprehension">5</span></p>
        <p>修炼法门: <span id="cultivationTechnique">基础法门</span></p>
    </div>
    
</body>
</html>
